<template>
  <div class="order-success-page">
    <el-card class="order-success-card">
      <!-- 成功提示 -->
      <div class="success-message">
        <i class="el-icon-check" style="color: #67c23a; font-size: 30px;"></i>
        <span>下单成功 感谢您的支持</span>
      </div>

      <!-- 按钮区域 -->
      <div class="button-area">
        <el-button type="primary" @click="viewOrder">查看订单</el-button>
        <el-button @click="continueShopping">继续逛逛</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 查看订单按钮点击事件
const viewOrder = () => {
  // 跳转到订单详情页面
  router.push('/order-detail');
};

// 继续逛逛按钮点击事件
const continueShopping = () => {
  // 跳转到首页或商品列表页
  router.push('/');
};
</script>

<style scoped>
.order-success-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.order-success-card {
  width: 600px;
  text-align: center;
  padding: 20px;
}

.success-message {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.button-area {
  margin-top: 20px;
}
</style>